/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Image, StyleSheet, Text, View, TouchableOpacity, ScrollView, Dimensions} from 'react-native';
import YTRNImagePicker from './index';

const {width} = Dimensions.get('window');

export default class MutiImagePicker extends Component<{}> {

    constructor(props) {
        super(props);
        this.state = {
            photos: []
        };
    }


    handleOpenImagePicker = () => {
        console.log(YTRNImagePicker);
        YTRNImagePicker.showImagePicker({
            maxImagesCount: 3,
            isRecordSelected: true,
            isCrop: true,
        }, (err, photos) => {
            console.log(err, photos);
            if (!err) {
                this.setState({
                    photos
                })
            }
        })
    };

    handleLaunchCamera = () => {
        YTRNImagePicker.openCamera({isCrop: true, showCropCircle: true, showCropFrame: false}, (err, photos) => {
            console.log(err, photos);
            if (!err) {
                this.setState({
                    photos: [...this.state.photos, ...photos]
                })
            }
        })
    };



    handleOpenVideoPicker = () => {
        YTRNImagePicker.openVideoPicker({allowPickingMultipleVideo: false}, (err, res) => {
            console.log(err, res);
            if (!err) {
                let photos = [...this.state.photos];
                res.map(v => {
                    photos.push({...v, uri: v.coverUri})
                });
                this.setState({
                    photos
                })
            }
        })
    };

    render() {

        const {photos} = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.scroll}>
                    <Button title={'拍照'} onPress={this.handleLaunchCamera}/>
                    <Button title={'选择照片'} onPress={this.handleOpenImagePicker}/>

                </View>
                <ScrollView style={{flex: 1}} contentContainerStyle={styles.scroll}>
                    {photos.map((photo, index) => {
                        let source = {uri: photo.uri};
                        if (photo.enableBase64) {
                            source = {uri: photo.base64};
                        }
                        return (
                            <Image
                                key={`image-${index}`}
                                style={styles.image}
                                source={source}
                                resizeMode={"contain"}
                            />
                        )
                    })}
                </ScrollView>
            </View>
        );
    }
}

const Button = ({title, onPress}) => {
    return (
        <TouchableOpacity
            style={styles.btn}
            onPress={onPress}
        >
            <Text style={{color: '#fff', fontSize: 16}}>{title}</Text>
        </TouchableOpacity>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        paddingTop: 40
    },
    btn: {
        backgroundColor: '#FDA549',
        justifyContent: 'center',
        alignItems: 'center',
        height: 44,
        paddingHorizontal: 12,
        margin: 5,
        borderRadius: 22
    },
    scroll: {
        padding: 5,
        flexWrap: 'wrap',
        flexDirection: 'row'
    },
    image: {
        margin: 10,
        width: (width - 80) / 3,
        height: (width - 80) / 3,
        backgroundColor: '#F0F0F0'
    },
});
